<template>
  <div class="coantainer">
    <a-card title="游戏面板" style="width: 1200px; height: 800px;">
      <div style="display: flex;">
        <div class="box">
          <div class="row" v-for="i of 20" :key="i">
            <div class="col" v-for="i of 20" :key="i"></div>
          </div>
        </div>
        <div style="flex: 1; display: flex; flex-direction: column; margin-left: 15px;">
          <a-tabs style="flex: 1;" type="rounded">
            <a-tab-pane key="1">
              <template #title>
                <icon-calendar/> Tab 1
              </template>
              Content of Tab Panel 1
            </a-tab-pane>
            <a-tab-pane key="2">
              <template #title>
                <icon-clock-circle/> Tab 2
              </template>
              Content of Tab Panel 2
            </a-tab-pane>
            <a-tab-pane key="3">
              <template #title>
                <icon-user/> Tab 3
              </template>
              Content of Tab Panel 3
            </a-tab-pane>
          </a-tabs>
          <a-card style="flex: 1;"></a-card>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
  
  
</script>

<style lang="scss">
  
  .coantainer {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .box {
    width: 600px;
    height: 600px;
    flex: 1;
  }
  
  .box>.row {
    display: flex;
  }
  
  .box>.row>.col {
    width: 30px;
    height: 30px;
    border-left: 1px solid #ddea96;
    border-top: 1px solid #ddea96;
  }
  
  .box>.row>.col:last-child {
    border-right: 1px solid #ddea96;
  }
  
  .box>.row:last-child>.col {
    border-bottom: 1px solid #ddea96;
  }
  
</style>